<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HelloWorld</title>
    <script src="script/react.development.js"></script>
    <script src="script/react-dom.development.js"></script>
</head>

<body>
    <div id="root"></div>

    <script>
        // React元素最终会通过虚拟DOM转换为真实DOM或者原生组件
        // React元素一旦创建就无法修改，只能通过新创建的元素进行替换
        const btn = React.createElement('button',
        // 设置react元素的属性
        {
            id: 'btn',
            type: 'button',
            className: 'hei', // class属性需要用className
            onClick: () => {  // 设置事件，属性名用驼峰命名法
                alert(123)
            }
        }, '点击按钮')

        // 创建根元素，用来放置React元素
        const root = ReactDOM.createRoot(document.getElementById('root'))

        // 当重复调用render()时，React会将两次的渲染结果进行比较，做最少的修改
        root.render(btn)

    </script>
</body>
</html>